<template>
    <Layout>
        <div>
            <Form ref="form1" :model="dataToQuery" :label-width="90" style="margin-top: 15px">
                <Row class="query-form">
                    <Col span="8">
                        <FormItem label="二级集团：" prop="belongOrgId">
                            <Select class='query-form-el' v-model='dataToQuery.belongOrgId' clearable>
                                <Option v-for="item in dicMap.twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="年度：" prop="year1" >
                            <DatePicker class="query-form-el" type="year" placeholder="请选择年度" v-model="dataToQuery.year1" :clearable="false"
                                        @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="8" v-if="!switchFlag" >
                        <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
                        <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                        <Button  class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                    </Col>
                </Row>

            </Form>
            <Row :gutter="24" style="margin-top: 15px">
                <Col span="12">
                    <Card dis-hover>
                        <div ref="echart1" :style="{height: '250px'}"></div>
                    </Card>
                </Col>
                <Col span="12">
                    <Card dis-hover>
                        <div ref="echart2" :style="{height: '250px'}"></div>
                    </Card>
                </Col>
            </Row>
            <Row :gutter="24" style="margin-top: 15px">
                <Col span="12">
                    <Card dis-hover>
                        <div ref="echart3" :style="{height: '450px'}"></div>
                    </Card>
                </Col>
                <Col span="12">
                    <Card dis-hover>
                        <div ref="echart4" :style="{height: '450px'}"></div>
                    </Card>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="22" style="margin-top: 10px;margin-left: 10px"> <p></p></Col>
                <Col span="1">
                    <Button type="primary" :disabled="dataTable.length<1" class="ivu-btn-add" icon="md-cloud-download" @click="exportForm('1')">导出</Button>
                </Col>
            </Row>
            <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!"
                   :loading='pageStatus.loading' border :columns="columns" :data="dataTable">
            </Table>
            <Row style="margin-right:10px;">
                <Col span="24">
                    <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                          @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
                          show-elevator/>
                </Col>
            </Row>
        </div>

    </Layout>
</template>

<script>
    import echarts from "echarts";
    import {Api} from '@/api/index.js'
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '@/common/cacheUtils.js';
    var cascaderDom = () => import('@/components/cascader-dom.vue');

    export default {
        components: {
            cascaderDom
        },
        data() {
            return {
                ...this.createCommonDataField(),
                companyId: sessionStorage('userId').getObject('userId').companyId,
                columns:[],
                columns1: [
                    {title: '序号', width: 65, align: 'center', render: this.indexColumnsRender},
                    {minWidth: 150, title: '单位名称', align: 'center', key: 'companyName',tooltip:true},
                ],

                dicMap: {
                    twoLevel:[],
                },
                tableHeight: 10,
                // api
                queryUrl: Api.queryEnRptInvestmentPlan + '/statistics',
                exportUrl: Api.queryEnRptInvestmentPlan + '/statistics/export',

                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
            }
        },
        mounted() {
            // this.setTableHeight();
            this.dataToQuery.year1 = new Date()
            this.dataToQuery.year = new Date().getFullYear().toString()
            this.tableHeight = 400
            this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                this.dicMap.twoLevel=res.data.data
            })
            this.query();
        },
        methods: {
            ...pageCommonFunction,

            exportForm(type){
                this.exportFormSubmit()
            },
            reset1(){
                this.dataToQuery={
                    year1: new Date(),
                    year: new Date().getFullYear().toString()
                }
                this.query()
            },
            query() {
                this.queryAjax();
            },
            queryAjax() {
                this.pageStatus.loading = true
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    conditions: this.dataToQuery
                };
                let container1 = echarts.init(this.$refs.echart1);
                let container2 = echarts.init(this.$refs.echart2);

                let container3 = echarts.init(this.$refs.echart3);
                let container4 = echarts.init(this.$refs.echart4);

                this.$http.post(this.queryUrl, data).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    if (res.data.status === 200) {
                        this.columns = [...this.columns1]
                        res.data.data.title.forEach(m=>this.columns.push(m))
                        this.dataTable = res.data.data.data;
                        this.pagedata.total = res.data.data.totalSize;
                        this.pageStatus.loading = false

                        let dataMap = res.data.data.dataMap;
                        let option1 = this.getOption(dataMap.xAxis,dataMap.series1,dataMap.series2, ['计划数量','完成数量'],'计划数量与完成对比');
                        container1.setOption(option1);
                        window.onresize = container1.resize;

                        let option2 = this.getOption(dataMap.xAxis,dataMap.series3,dataMap.series4,['计划投入金额','实际投入金额'],'计划投入与实际投入对比(万元)');
                        option2.yAxis[0]={
                            type: 'value',
                            min: 0,
                            minInterval:1,
                            axisLabel: {
                                formatter: '{value} 万元'
                            }
                        }
                        container2.setOption(option2);
                        window.onresize = container2.resize;

                        let option3 = this.getOption1(dataMap.yAxis,dataMap.ySeries1,dataMap.ySeries2, ['计划数量','完成数量'],'计划数量与完成对比');
                        container3.setOption(option3);
                        window.onresize = container3.resize;

                        let option4 = this.getOption1(dataMap.yAxis,dataMap.ySeries3,dataMap.ySeries4, ['计划投入金额','实际投入金额'],'计划投入与实际投入对比(万元)');
                        container4.setOption(option4);
                        window.onresize = container4.resize;
                    }
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                    this.pageStatus.loading = false
                })
            },

            getOption(xAxis,series1,series2,legendData,titleName) {
                return {
                    title: {
                        text: titleName,
                        textStyle: {
                            fontSize: 14,
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data:legendData,
                        bottom:1,
                    },
                    grid: {
                        left: '1%',
                        // right: '3%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xAxis,
                            axisLabel: {
                                show: true,
                                fontSize: 12,
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            minInterval:1,
                        }
                    ],
                    color: ['#42A5F5','#FF3E80'],
                    series: [
                        {
                            name: legendData[0],
                            type: 'bar',
                            // barWidth : 30,
                            // barGap: "1%",
                            label: {
                                show: true,
                            },
                            itemStyle: {
                                barBorderRadius: [4, 4, 0, 0],
                            },
                            data: series1,
                        },
                        {
                            name: legendData[1],
                            type: 'bar',
                            // barWidth : 30,
                            // barGap: "1%",
                            label: {
                                show: true,
                            },
                            itemStyle: {
                                barBorderRadius: [4, 4, 0, 0],
                            },
                            data: series2,
                        }
                    ]
                }
            },

            getOption1(yAxis,series1,series2,legendData,titleName) {
                let option = {
                    title: [
                        {
                            text: titleName,
                            textStyle: {fontSize: 14},
                            left: 'center'
                        },
                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {	//图例组件
                        bottom: 1,
                        data: legendData
                    },
                    grid: {
                        left: '1%',
                        // right: '1%',
                        containLabel: true,
                    },
                    color: ['#42A5F5','#FF3E80'],
                    xAxis: [
                        {
                            type: 'value',
                            splitLine: {show: false},
                            axisTick: {show: false},
                            axisLine: {show: false},
                            axisLabel: {show: false},
                        },
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            splitLine: {show: false},
                            axisTick: {show: false},
                            axisLine: {show: false},
                            data: yAxis
                        },
                    ],
                    series: [
                        {
                            name: legendData[0],
                            type: 'bar',
                            // stack: 'total',
                            label: {show: true,position: 'right'},
                            emphasis: {
                                focus: 'series'
                            },
                            data: series1
                        },
                        {
                            name: legendData[1],
                            type: 'bar',
                            // stack: 'total',
                            label: {show: true,position: 'right'},
                            emphasis: {
                                focus: 'series'
                            },
                            data: series2
                        },
                    ]
                };
                return option;
            },
        },
        watch: {
            'dataTable': function () {
                // this.dataTable.forEach(m=>{
                //     if (m.briefId === '-1') {
                //         m['_disableExpand'] = true
                //     }
                // })
            }
        },
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

    p {
        display: inline-block;
        font-size: 18px;
    }

</style>
